<template>
	<div class="collapse-panel" :class="{ 'open': isOpen, 'close': !isOpen }">
		<div class="collapse-panel2">
			<div class="header" :style="site=='left'?'justify-content: space-between;':'justify-content: flex-start;'">
				<div v-if="site=='left'">
					<div>{{ title }}</div>
					<div class="ss-font-24">{{mes}}</div>
				</div>
				<image style="width: 32rpx;" mode="widthFix" v-if="isOpen" src="./bu.png"></image>
				<image style="width: 32rpx;" mode="widthFix" v-else src="./rg.png"></image>
				<div v-if="site!='left'">
					<div>{{ title }}</div>
					<div class="ss-font-24">{{mes}}</div>
				</div>
			</div>
			<div class="header2" @click="toggle"
				:style="site=='left'?'justify-content: space-between;':'justify-content: flex-start;'">
				<div v-if="site=='left'">
					<div>{{ title }}</div>
					<div class="ss-font-24">{{mes}}</div>
				</div>
				<image style="width: 32rpx;" mode="widthFix" v-if="isOpen" src="./bu.png"></image>
				<image style="width: 32rpx;" mode="widthFix" v-else src="./rg.png"></image>
				<div v-if="site!='left'">
					<div>{{ title }}</div>
					<div class="ss-font-24">{{mes}}</div>
				</div>
			</div>
			<transition name="slide-up">
				<div v-show="isOpen" class="content">
					<slot></slot>
				</div>
			</transition>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'CollapsePanel',
		props: {
			title: String,
			mes: String,
			open: Boolean,
			site: { //文字位置
				type: String,
				default: 'left',
			},
		},
		data() {
			return {
				isOpen: this.open || false
			};
		},
		methods: {
			toggle() {
				if (this.isOpen) {
					this.closeAllDescendants(this.$slots.default);
				}
				this.isOpen = !this.isOpen;
			},
			closeAllDescendants(slots) {
				if (slots) {
					slots.forEach(slot => {
						if (slot.componentInstance && slot.componentInstance.$options.name === 'CollapsePanel') {
							slot.componentInstance.isOpen = false;
							this.closeAllDescendants(slot.componentInstance.$slots.default);
						}
					});
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/uni.scss';
	.collapse-panel {
		border-radius: 4px;
		overflow: hidden;
	}

	.content {
		padding: 0 10px;
		overflow: hidden;
	}

	.slide-up-enter-active,
	.slide-up-leave-active {
		transition: all .5s ease;
	}

	.slide-up-enter,
	.slide-up-leave-to {
		transform: translateY(-100%);
	}

	.collapse-panel2 {
		position: relative;
	}

	.header {
		cursor: pointer;
		padding: 25rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f5f5f5;
	}

	.header2 {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		cursor: pointer;
		padding: 20px;
		display: flex;
		align-items: center;
		background-color: #fff;
		z-index: 2000;
	}

	.arrow {
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 6px 4px 0 4px;
		border-color: #999 transparent transparent transparent;
		transition: transform 0.3s ease;
	}
</style>